```jsx
import * as tagsInput from "@zag-js/tags-input"
import { normalizeProps, useMachine } from "@zag-js/solid"
import { createMemo, createUniqueId, For } from "solid-js"

export function TagsInput() {
  const service = useMachine(tagsInput.machine, {
    id: createUniqueId(),
    defaultValue: ["React", "Vue"],
  })

  const api = createMemo(() => tagsInput.connect(service, normalizeProps))

  return (
    <div {...api().getRootProps()}>
      <For each={api().value}>
        {(value, index) => (
          <span {...api().getItemProps({ index: index(), value })}>
            <div {...api().getItemPreviewProps({ index: index(), value })}>
              <span>{value} </span>
              <button
                {...api().getItemDeleteTriggerProps({ index: index(), value })}
              >
                &#x2715;
              </button>
            </div>
            <input {...api().getItemInputProps({ index: index(), value })} />
          </span>
        )}
      </For>
      <input placeholder="Add tag..." {...api().getInputProps()} />
    </div>
  )
}
```
